<script setup>
	import {inject, ref} from "vue";
	import emitter from "@/utils/mitt.js";
	import abilityListData from '@/dicts/ability/abilityList.json'
	
	const getAssetsFile = inject("getAssetsFile");
	
	const changePath = (path, query = null) => {
		emitter.emit('changePath', {
			path: path,
			query: query
		})
	}
	
	const abilityList = ref([])
	const getAbilityList = () => {
		const res = abilityListData
		try {
			if (res.data.code === 200) {
				abilityList.value = res.data.result
			}
			else {
				console.log(res.data.msg)
			}
		}
		catch(e) {
			console.log(e);
		}
	}
	getAbilityList()
	
</script>

<template>
	<div class="pageContent">
		<n-space
			align="center"
			justify="space-between"
			style="margin-bottom: 20px"
		>
			<n-h6 class="pageTitle" prefix="bar">
				<div>
					能力评价
				</div>
			</n-h6>
		</n-space>
		<n-grid
			:cols="3"
			:x-gap="20"
			:y-gap="30"
		>
			<n-gi :span="1" v-for="item in abilityList">
				<img
					:src="getAssetsFile(item.img)"
					alt=""
					style="width: 100%; cursor: pointer"
					@click="changePath(item.path)"
				>
			</n-gi>
		</n-grid>
	</div>
</template>

<style scoped>
</style>
